<template>
  <div class="voucher-img-warp">
    <div v-if="data.code" :class="['state-text', getStatusClass(data.state)]">{{data.state_name}}</div>
    <div v-if="qrcodeSrc">
      <img class="qrcode-img" :src="qrcodeSrc" />
    </div>
    <div v-if="data.code">
      <span class="code-text">{{codeDesc || '核销码'}}：</span>
      <span class="code">{{data.code}}</span>
    </div>
  </div>
</template>

<script>
  import QRCode from 'qrcode'

  import {
    VOUCHER_STATE_LIST
  } from '@data/dic/order'

  export default {
    name: 'voucher-img-block',
    components: {},

    props: {
      data: { // 核销码数据
        type: Object,
        default: null
      },
      codeDesc: { // 如“套餐核销码”、“总核销码”、“子核销码”
        type: String,
        default: ''
      },
    },

    data() {
      return {
        usedImg: '/static/images/order/voucher-used.jpg',
        invalidImg: '/static/images/order/voucher-invalid.png',
        qrcodeSrc: '',
      }
    },

    computed: {
      qrcodeId: function () {
        return 'qrcode-' + this.data.code
      },
      state: function () {
        return this.data.state
      },
      code: function () {
        return this.data.code
      },
      // 外部核销二维码
      qr_code_url: function () {
        return this.data.qr_code_url
      },
    },

    watch: {
      code: function () {
        this.renderQrCode()
      },
      qrcodeSrc: function () {
        this.$nextTick(() => {
          this.$emit('afterRender')
        })
      }
    },

    methods: {
      getStatusClass(status) {
        const obj = VOUCHER_STATE_LIST.find((item) => {
          return item.key == status
        })
        return obj ? 'c-' + obj.styleType : ''
      },

      renderQrCode() {
        // 没有核销码时不展示
        if (!this.code) {
          this.qrcodeSrc = ''
          return
        }

        // 根据订单状态展示
        const stateUrl = this.renderQrCodeState()
        if (stateUrl) {
          this.qrcodeSrc = stateUrl
          return
        }

        // 外部核销二维码
        if (this.qr_code_url) {
          this.qrcodeSrc = this.qr_code_url
          return
        }

        // 生成核销二维码图片
        this.$nextTick(() => {
          QRCode.toDataURL(this.code + '', {
            width: 150,
            margin: 0
          }).then(url => {
            this.qrcodeSrc = url
          })
        })
      },

      renderQrCodeState(src) {
        // 已使用
        if (this.state == 10) {
          return this.usedImg
        }
        // 已失效
        else if (this.state == 11) {
          return this.invalidImg
        }
        return src || ''
      }
    },

    mounted() {
      this.renderQrCode()
    },

    destroyed() {},
  }
</script>

<style lang="less" scoped>
  @import "~@style_m/basic/utils/index";

  .voucher-img-warp {
    margin: @size-default;
    text-align: center;

    .qrcode-img {
      display: block;
      width: 150px;
      height: 150px;
      margin: @size-default auto @size-sm;
      padding: @size-xs;
      background: @color-bg;
    }

    .state-text,
    .code-text {
      font-size: @font-size-md;
    }

    .code {
      font-size: 1.3 * @font-size-md;
      font-weight: @font-weight-bold;
    }
  }
</style>
